<script setup lang="ts">
import { ref } from "vue";
import basicDemoCopy from "@/components/basic-demo-copy.vue";
import BasicDemo from "@/components/basic-demo.vue";
import HelloWorld from "@/components/hello-world.vue";
import { randomTree, randomTrees } from "@/components/random-tree";
import type { TreeLike } from "@/models/tree-like";

const flat = ref<TreeLike[]>(randomTree(4, 2).concat(randomTrees(2, 4, 2)));

function handleRefresh(_flat: TreeLike[]) {
  flat.value = _flat;
}
</script>

<template>
  <div class="container">
    <basic-demo :data="flat" @refresh="handleRefresh" />
    <basic-demo-copy :data="flat" @refresh="handleRefresh" />
    <!-- <hello-world :flat="flat" /> -->
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  & > div {
    width: 100%;
    height: 50%;
  }
}
</style>
